<template>
  <div class="snowflakes" v-if="show">
    <div class="snowflake" v-for="i in snowflakes" :key="i"></div>
  </div>
</template>

<script>
export default {
  name: 'snowflakes-index',
  props: {
    flag: Boolean
  },
  data() {
    return {
      show: this.flag,
      snowflakes: 200
    }
  },
}
</script>

<style lang="scss" scoped>
.snowflakes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -10%;
  width: 10px;
  height: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(230, 240, 255, 1) 100%);
  border-radius: 50%;
  filter: blur(2px);
  animation: fall linear infinite;
  opacity: 0.9;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;

  &:hover {
    transform: scale(2);
    opacity: 1;
    filter: blur(1px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 1);
  }

  @for $i from 1 through 200 {
    &:nth-child(#{$i}) {
      left: random(100) * 1%;
      width: random(10) + 5px;
      height: random(10) + 5px;
      animation-duration: (random(30) + 20) * 1s;
      animation-delay: random(30) * -1s;
      opacity: random(10) * 0.1 + 0.4;
      animation-timing-function: cubic-bezier(random(100)*0.01, random(100)*0.01, random(100)*0.01, random(100)*0.01);
    }
  }
}

@keyframes fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 0.9;
  }

  50% {
    transform: translateX(random(200) - 100px) rotate(180deg) scale(0.8);
  }

  100% {
    transform: translateY(110vh) translateX(random(200) - 100px) rotate(360deg) scale(0.5);
    opacity: 0.2;
  }
}
</style>
